@layout("/common/_container.html"){
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=esCmoRsS0550Qaa9YSI8SqglYh4G0c1g">
</script>
<style type="text/css">
	#heatmap {	
		width: 100%;
		height: 440px;
		overflow: hidden;
		font-family:"微软雅黑";
	}
	.ztree {height:200px; overflow:auto;}
	#area-select{
		margin: auto auto 20px auto;
	}
	#heatmap_mark {
	    bottom: 0;
	    background-color: rgba(73,73,72,.6);
	    border-radius: 10px;
	    padding: 1em;
	    position: absolute;
    	right: 16px;
    	bottom: 100px;
	}
	.heatmap_mark_text {
    	color: #dfdfdf;
	}
	.linear_color {
	    margin-top: 10px;
	    height: 5px;
	    border-radius: 2px;
	    width: 600px;
	    background: -webkit-linear-gradient(left,rgba(0,0,0,.1),#00f,#0f0,#ff0,red,red)!important;
	    background: -moz-linear-gradient(left,rgba(0,0,0,.1),#00f,#0f0,#ff0,red,red)!important;
	    background: -ms-linear-gradient(left,rgba(0,0,0,.1),#00f,#0f0,#ff0,red,red)!important;
	    background: -o-linear-gradient(left,rgba(0,0,0,.1),#00f,#0f0,#ff0,red,red)!important;
	    background: linear-gradient(left,rgba(0,0,0,.1),#00f,#0f0,#ff0,red,red)!important;
	}
	.heatmap_mark_title {
    	color: #fff;
    	font-size: 16px;
	}
	.heatmap_color_span {
    	width: 18%;
	}
	.heatmap_blue, .heatmap_green, .heatmap_red, .heatmap_result_red, .heatmap_yellow, .text_center {
    	text-align: center;
	}
	.heatmap_color_span, .inline-block, .long_line {
    	display: inline-block;
	}
</style>
 	<link rel="stylesheet" href="${ctxPath}/static/modular/heatmap/heatmap/css/reset.css"> <!-- CSS reset -->
    <link rel="stylesheet" href="${ctxPath}/static/modular/heatmap/heatmap/css/style.css"> <!-- Resource style -->
    <script src="${ctxPath}/static/modular/heatmap/heatmap/modernizr.js"></script> <!-- Modernizr -->

    <script src="${ctxPath}/static/modular/heatmap/heatmap/jquery.mobile.custom.min.js"></script>
    <script src="${ctxPath}/static/modular/heatmap/heatmap/jtline.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            
            // jtLine.myPublicFunction('hi nady');
        });
    </script>
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
            	<div class="row">
            		<div class="col-md-2 area-select" style="margin-top: 10px;">
	              		区域选择:
	              		<span class="dropdown">
									<a href="javascript:void(0);" data-toggle="dropdown">
										<span class="text" data-role="label" id="selectArea">未选择</span>
										<span class="caret"></span>
									</a>
								<div class="dropdown-menu" style="left: 0;right: auto;">
									<ul data-role="tree" id="areaTree" class="ztree"></ul>
								</div>
						</span>
            		</div>
            		<div class="col-md-3">
						<#TimeCon id="time" name="日期" isTime="false" pattern="YYYY-MM-DD"/>
            		</div>
            		<div class="col-md-2">
						<#SelectCon id="granularity" name="粒度">
								<option value="0">60分钟</option>
								<option value="1">15分钟</option>
						</#SelectCon>
            		</div>
            		<div class="col-md-3 pull-right">
            			<#button name="查看" icon="fa-search" clickFun="Heatmap.search()"/>
            			<#button name="导出" icon="fa-download" clickFun="Heatmap.download()"/>
            			<#button name="播放" icon="fa-play" id="playButton" clickFun="Heatmap.play()"/>
            		</div>
            	</div>
            </div>
            <div class="ibox-content" id="ibox-content-map">
                <div class="row row-lg">
                    <div class="col-sm-12">
                 		<div id="heatmap">
                 		</div>
                    </div>
                    <div class="col-sm-12">
	                    <div class="myjtline" id="myjtline">
	                    	
	    				</div>
	    				<div id="heatmap_mark">
	    					<div>
	    						<span class="heatmap_mark_title">颜色对应人口密度</span>
	    						<span class="heatmap_mark_text" style="float:right;padding-top:5px" id="heatmap_mark_density">人/0.25平方千米</span>
	    					</div>
	    					<div class="linear_color"></div>
	    					<span id="heatmap_blue" class="heatmap_blue heatmap_mark_text heatmap_color_span">0-5</span>
	    					<span id="heatmap_green" class="heatmap_green heatmap_mark_text heatmap_color_span">6-12</span>
	    					<span id="heatmap_yellow" class="heatmap_yellow heatmap_mark_text heatmap_color_span">13-18</span>
	    					<span id="heatmap_red" class="heatmap_red heatmap_mark_text heatmap_color_span">19-22</span>
	    					<span id="heatmap_result_red" class="heatmap_result_red heatmap_mark_text heatmap_color_span">&gt;22</span>
	    				</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${ctxPath}/static/js/canvas2image.js"></script>
<script src="${ctxPath}/static/js/html2canvas.js"></script>
<script src="${ctxPath}/static/js/Heatmap_min.js"></script>
<script src="${ctxPath}/static/modular/heatmap/heatmap/heatmap.js"></script>
@}
